<template>
  <div class="search-wrapper">
      <input type="text" v-model="search" class="search-input" placeholder="User name" @change="handleChange" @input="handleInput">
      <i v-if="!!search" class="iconfont icon-shanchu" @click="handleClear"></i>
  </div>
</template>

<script>
import useInput from './use-input'
export default {
  name: 'Search',
  emits: ['search'],
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const { search, handleInput, handleChange, handleClear } = useInput(props, emit)
    return {
      search,
      handleInput,
      handleChange,
      handleClear
    }
  }
}
</script>
<style lang="scss" scoped>
.iconfont {
  width: 20px;
  height: 20px;
}
.search {
  &-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid $color-dialog-background;
    background-color: $color-highlight-background;
    border-radius: 8px;
  }
  &-input {
    flex: 1;
    height: 30px;
    background: transparent;
    text-indent: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    margin-right: 4px;
    box-sizing: border-box;
    color: $color-text-ll;
    font-size: 13px;
    letter-spacing: 1px;
  }
}
</style>
